<template>
	<view class="about">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				关于我们
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<!-- #endif -->
		<view class="headtop">
			<image :src="baseUrl + '/wximage/about_bj.png'" class="bj"></image>
			<view class="nr">
				<image :src="image" class="logo"></image>
				<view class="title">{{x_name}}</view>
				<view class="desc">当前版本:{{version_number}}</view>
				<view class="concat">
					<text>商户合作：{{mobile}}</text>
					<text>联系邮箱：{{email}}</text>
					<text>联系方式：{{x_tell}}</text>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="name">{{company_title}}</view>
			<view class="banquan">@{{banquan}} 版权所有</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				x_name: '',
				image: '',
				x_tell: '',
				mobile: '',
				email: '',
				company_title: '',
				banquan: '',
				version_number: '1.0.0',
			}
		},
		onLoad() {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			
			// #ifdef MP-WEIXIN
			const accountInfo = uni.getAccountInfoSync();
			this.version_number = accountInfo.miniProgram.version // 小程序 版本号
			// #endif
			
			// #ifdef MP-ALIPAY
			my.setNavigationBar({
				frontColor: '#000000',
				backgroundColor: '#ffffff',
			})
			// 设置导航栏标题
			my.setNavigationBar({
				title: '关于我们'
			})
			// #endif
			
			//获取基本配置信息
			this.request({
				url: '/xcx/webconfig',
				data: {}
			}).then(res => {
				if (res.data.code == 200) {
					this.x_name = res.data.data.x_name;
					this.image = res.data.data.image;
					this.x_tell = res.data.data.x_tell;
					this.mobile = res.data.data.mobile;
					this.email = res.data.data.email;
					this.company_title = res.data.data.company_title;
					this.banquan = res.data.data.banquan;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
		},
		methods:{
			fanhui() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.about {
		width: 100%;
		margin: 0 auto;
	
		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
	
			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: center;
				color: #333333;
				font-size: 32rpx;
			}
			
			.iconfont {
				position: absolute;
				top: 0;
				left: 14rpx;
				font-size: 44rpx;
			}
		}
		
		.headtop {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 90;
			
			.bj{
				width: 100%;
				height: 100vh;
				display: flex;
			}
			
			.nr{
				position: absolute;
				top: 290rpx;
				left: 80rpx;
				
				.logo{
					width: 200rpx;
					height: 200rpx;
				}
				
				.title{
					font-size: 52rpx;
					color: #333333;
					font-weight: 700;
					margin-bottom: 10rpx;
					margin-left: 20rpx;
					margin-top: 10rpx;
				}
				
				.desc{
					font-size: 24rpx;
					color: #999990;
					margin-left: 20rpx;
					margin-top: 28rpx;
				}
				
				.concat{
					margin-left: 20rpx;
					margin-top: 100rpx;
					
					text{
						display: block;
						font-size: 28rpx;
						color: #666666;
						margin-bottom: 40rpx;
					}
				}
			}
		}
		
		.foot{
			width: 100%;
			position: fixed;
			bottom: 30rpx;
			left: 0;
			z-index: 90;
			text-align: center;
			
			.name{
				font-size: 24rpx;
				color: #999999;
				margin-bottom: 20rpx;
			}
			
			.banquan{
				font-size: 22rpx;
				color: #999999;
			}
		}
	}
</style>